<template>
  <a-modal
    :title="formTile + '账号'"
    :visible="true"
    width="60%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card v-if="showTable">
        <a-row style="margin-bottom: 10px">
          <a-col :span="24">
            <a-form
              layout="inline"
              :form="form"
              @submit="handleSubmit"
            >
              <a-form-item label="姓名">
                <a-input
                  allow-clear
                  placeholder="请输入姓名"
                  v-decorator="['name']"
                ></a-input>
              </a-form-item>
              <a-form-item label="工号">
                <a-input
                  allow-clear
                  placeholder="请输入工号"
                  v-decorator="['jobNumber']"
                ></a-input>
              </a-form-item>
              <a-form-item>
                <a-button
                  type="primary"
                  html-type="submit"
                >搜索</a-button>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
        <a-table
          bordered
          :row-selection="{ selectedRowKeys: selectedRowKeys,selectedRows:selectedRows, onChange: onSelectChange,type:'radio' }"
          :columns="columns"
          :loading="loading"
          :data-source="dataList"
        />

      </a-card>
      <a-card style="margin-top:5px">

        <a-form
          layout="inline"
          :form="form"
          @submit="beforeSubmit"
        >
          <a-row>
            <a-form-item label="品牌">
              <a-checkbox-group
                style="width: 100%;"
                v-model="brand"
                @change="selectBrand"
              >
                <a-row>
                  <a-col
                    :span="6"
                    v-for="item in brandList"
                    :key="item"
                  >
                    <a-checkbox :value="item">
                      {{ item }}
                    </a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group>
            </a-form-item>
          </a-row>
          <a-row>
            <a-form-item label="所在组">
              <a-radio-group
                v-model="groupId"
                @change="selectGroup"
              >
                <a-radio
                  :value="item.id"
                  v-for="(item,index) in groupList"
                  :key="index"
                >
                  {{ item.name }}
                </a-radio>

              </a-radio-group>
            </a-form-item>
          </a-row>
          <a-row>
            <a-form-item label="标签">
              <div style=" margin-left: 14px;">
                <template v-for="(tag, index) in tags">
                  <a-tag
                    color="blue"
                    :key="tag"
                    :closable="true"
                    @close="() => handleClose(tag)"
                  >
                    {{ tag }}
                  </a-tag>
                </template>
                <div v-if="inputVisible">
                  <div>
                    <span>标签名称：</span>
                    <a-input
                      v-if="inputVisible"
                      ref="input"
                      type="text"
                      size="small"
                      :style="{ width: '200px' }"
                      :value="inputValue"
                      @change="handleInputChange"
                    />
                  </div>
                  <a-button
                    @click="handleInputConfirm"
                    type="primary"
                  >确定</a-button>
                </div>
                <a-tag
                  v-else
                  style="background: #fff; borderStyle: dashed;"
                  @click="showInput"
                >
                  <a-icon type="plus" /> 标签
                </a-tag>
              </div>

            </a-form-item>
          </a-row>
          <a-row>
            <a-col
              :span="24"
              :style="{ textAlign: 'right' }"
            >
              <a-button @click="reset">
                取消
              </a-button>
              <a-button
                :style="{ marginLeft: '8px' }"
                type="primary"
                html-type="submit"
              >
                保存
              </a-button>

            </a-col>

          </a-row>

        </a-form>

      </a-card>
    </div>

  </a-modal>
</template>

<script>
import { postAction } from '@/api/manage'
import { pattern } from '@api/pattern/index'
const columns = [
  {
    title: '姓名',
    dataIndex: 'name'
  },
  {
    title: '账号',
    dataIndex: 'email'
  },
  {
    title: '工号',
    dataIndex: 'jobNumber'
  },
  {
    title: '手机号',
    dataIndex: 'mobile'
  }
]
const brandList = ['JNBY HOME', 'A PERSONAL NOTE 73', 'LESS', 'jnby by JNBY', 'jnby for mini', 'Pomme de terre', 'JNBY', '速写']
export default {
  components: {},

  props: {
    account: {
      type: Object,
      default: null
    }
  },

  data() {
    return {
      patt: 'api/gateway/imagemanage-center/',
      columns,
      loading: true,
      brand: [],
      inputVisible: false,
      accountInfo: [],
      inputValue: '',
      form: this.$form.createForm(this),
      dataList: [],
      selectedRowKeys: [],
      selectedRows: [],
      brandList,
      groupId: '',
      tags: [],
      groupList: [],
      showTable: false
    }
  },

  created() {
    const { account } = this.$props
    if (account) {
      this.formTile = '编辑'
      this.brand = account.brand
      this.accountInfo = account
      this.tags = account.tag
    } else {
      this.formTile = '新增'
      this.showTable = true
    }
  },
  mounted() {
    this.loadData()
    this.getGroupList()
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.loadData()
    },
    beforeSubmit(e) {
      e.preventDefault()
      this.submit()
    },
    reset() {
      this.form.resetFields()
      this.$emit('close')
    },
    getQueryParams() {
      const params = this.form.getFieldsValue()
      return {
        ...params
      }
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      console.log(this.selectedRows)
    },
    showInput() {
      this.inputVisible = true
    },

    handleInputChange(e) {
      e.preventDefault()
      this.inputValue = e.target.value
    },
    handleClose(removedTag) {
      console.log(removedTag)
      const tags = this.tags.filter(tag => tag !== removedTag);
      console.log(tags);
      this.tags = tags;
    },

    handleInputConfirm() {
      const inputValue = this.inputValue
      let tags = this.tags
      if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue]
      }
      Object.assign(this, {
        tags,
        inputVisible: false,
        inputValue: ''
      })
    },

    getGroupList() {
      const data = {}
      try {
        postAction(`${pattern}group/list`, data).then(data => {
          if (data.code == 200) {
            this.groupList = data.data
            if (this.accountInfo) {
              console.log(this.accountInfo.groupName)
              data.data.map(item => {
                if (item.name == this.accountInfo.groupName) {
                  this.groupId = item.id
                }
              })
            }
          } else {
            this.$message.warning(data.msg)
          }
          this.loading = false
        })
      } catch (error) {
        this.loading = false
      }
    },
    loadData() {
      var data = this.getQueryParams()
      if (this.brand) {
        data.brand = this.brand
      }
      try {
        postAction(`${pattern}account/employee/search`, data).then(data => {
          if (data.code == 200) {
            this.dataList = data.data
            this.form.resetFields()
          } else {
            this.$message.warning(data.msg)
          }
          this.loading = false
        })
      } catch (error) {
        this.loading = false
      }
    },
    selectBrand(brand) {
      this.brand = brand
    },
    selectGroup(group) {
      this.groupId = group.target.value
    },
    submit() {
      if (this.showTable && this.selectedRows.length == 0) {
        this.$message.warning('请选择账号的用户！')
      }
      if (this.showTable && this.groupId == '') {
        this.$message.warning('请选择账号的所在组！')
      }
      // if (this.showTable && !this.tags.length) {
      //   this.$message.warning('请选择账号的所在标签！')
      // } 
      else {
        
        const params = {
          brands: this.brand,
          groupId: this.groupId,
          name: this.showTable ? this.selectedRows[0].name : this.accountInfo.name,
          account: this.showTable ? this.selectedRows[0].email : this.accountInfo.account,
          jobNumber: this.showTable ? this.selectedRows[0].jobNumber : this.accountInfo.jobNumber,
          password: this.showTable ? this.selectedRows[0].jobNumber : this.accountInfo.jobNumber,
          mobile: this.showTable ? this.selectedRows[0].mobile : this.accountInfo.mobile
        }
        if(this.tags.length){
          const tag = this.tags.toString()
          params.tag = tag
        }
        if (this.accountInfo.id) {
          params.accountId = this.accountInfo.id
        }
        const api = this.showTable ? `${this.patt}account/save` : `${this.patt}account/update`
        this.$http({
          url: api,
          method: 'post',
          data: params
        }).then(data => {
          if (data.code == 200) {
            this.$message.success(this.showTable ? '新建帐号成功！' : '修改成功！')
            this.reset()
          } else {
            this.$message.warning(data.msg)
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="less">
.main {
  // display: flex;
}
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
.ml-20 {
  margin-left: 20px;
}
</style>
